<!DOCTYPE html>
<html>
<head>
<title>Proof of Concept: VNC</title>
<meta charset="utf-8">

<link href="../base1/cockpit.css" rel="stylesheet" type="text/css">

</head>
<body>
    <div class="container-fluid">
        <h2>VNC tunneled through Cockpit</h2>

        <table class="form-table-ct">
            <tr>
                <td><label class="control-label" for="port">Local port</label></td>
                <td><input class="form-control" id="port" value="5900" style="width: 100px"></td>
            </tr>
            <tr>
                <td></td>
                <td><button class="btn btn-default btn-primary" id="connect">Connect</button></td>
            </tr>
        </table>

        <canvas id="canvas" hidden>
             Canvas not supported.
        </canvas>

        <p id="connectioncontrols" hidden>
            <button class="btn btn-default btn-primary" id="disconnect">
                Disconnect
            </button>
        </p>

    </div>

    <!-- Unused but required by noVNC -->
    <div hidden>
        <select id="noVNC_setting_logging"></select>
        <input id="noVNC_setting_stylesheet" type="checkbox">
        <input id="noVNC_setting_host">
        <input id="noVNC_setting_port">
        <input id="noVNC_setting_password">
        <input id="noVNC_setting_encrypt">
        <input id="noVNC_setting_true_color">
        <input id="noVNC_setting_cursor">
        <input id="noVNC_setting_resize">
        <input id="noVNC_setting_shared">
        <input id="noVNC_setting_view_only">
        <input id="noVNC_setting_websockify">
        <input id="noVNC_setting_repeaterID">
        <input id="noVNC_setting_token">
        <input id="noVNC_setting_path">
        <input id="noVNC_setting_clip">
        <input id="noVNC_setting_resize">
        <button id="noVNC_mouse_button0"></button>
        <button id="noVNC_mouse_button1"></button>
        <button id="noVNC_mouse_button2"></button>
        <button id="noVNC_mouse_button4"></button>
        <button id="noVNC_view_drag_button"></button>
        <button id="noVNC_clipboard_button"></button>
        <button id="noVNC_clipboard_clear_button"></button>
        <button id="noVNC_clipboard_text"></button>
        <button id="noVNC_keyboard_button"></button>
        <button id="noVNC_extra_keys"></button>
        <button id="noVNC_sendCtrlAltDel_button"></button>
        <button id="noVNC_toggleXvp_button"></button>
        <button id="noVNC_toggleExtraKeys_button"></button>
        <button id="noVNC_toggleCtrl_button"></button>
        <button id="noVNC_toggleAlt_button"></button>
        <button id="noVNC_sendTab_button"></button>
        <button id="noVNC_sendEsc_button"></button>
        <button id="noVNC_xvpReboot_button"></button>
        <button id="noVNC_xvpReset_button"></button>
        <button id="noVNC_xvpShutdown_button"></button>
        <button id="noVNC_connectPanel_button"></button>
        <button id="noVNC_connect_button"></button>
        <button id="noVNC_disconnect_button"></button>
        <button id="noVNC_fullscreen_button"></button>
        <button id="noVNC_settings_apply"></button>
        <button id="noVNC_settings_button"></button>
        <div id="noVNC_settings_menu"></div>
        <div id="noVNC_controls"></div>
        <div id="noVNC_description"></div>
        <button id="noVNC_description_button"></button>
        <div id="noVNC_control_bar"></div>
        <div id="noVNC_mobile_buttons"></div>
        <div id="noVNC_container"></div>
        <div id="noVNC_keyboardinput"></div>
        <div id="noVNC_popup_status"></div>
        <div id="noVNC_status"></div>
    </div>

    <!-- TODO: These should be combined -->
    <!-- XXX: mbalmer thinks the layout should like in the upstream project. -->
    <script src="include/util.js"></script>
    <script src="include/webutil.js"></script>
    <script src="include/base64.js"></script>
    <script src="include/websock.js"></script>
    <script src="include/des.js"></script>
    <script src="include/keyboard.js"></script>
    <script src="include/inflator.js"></script>
    <script src="include/display.js"></script>
    <script src="include/jsunzip.js"></script>
    <script src="include/rfb.js"></script>
    <script src="include/ui.js"></script>

    <script src="include/input/devices.js"></script>
    <script src="include/input/keysymdef.js"></script>
    <script src="include/input/keysym.js"></script>
    <script src="include/input/util.js"></script>
    <script src="include/input/xtscancodes.js"></script>

    <script src="../base1/jquery.js"></script>
    <script src="../base1/cockpit.js"></script>

    <script>
    (function() {
        $("#connect").on("click", function() {
            $("canvas").show();
            $("table").hide();
            $("#connectioncontrols").show();

            var query = window.btoa(JSON.stringify({
                    payload: "stream",
                    protocol: "binary",
                    address: "127.0.0.1",
                    port: parseInt($("#port").val(), 10),
                    binary: "raw",
            }));

            console.log(cockpit, cockpit.transport);
            console.log("channel", $("#port").val());
            cockpit.transport.wait(function() {
                connect("cockpit/channel/" + cockpit.transport.csrf_token + "?" + query);
            });
        });

        var rfb;

        $("#disconnect").on("click", function() {
            console.log("disconnecting");
            rfb.disconnect();
            $("canvas").hide();
            $("table").show();
            $("#connectioncontrols").hide();
        });

        function connect(path) {
            WebUtil.init_logging('warn');

            var options = {
                target: document.getElementById('canvas'),
                encrypt: location.protocol === "https:",
                repeaterID: '',
                true_color: true,
                local_cursor: true,
                shared: false,
            };

            options.onUpdateState = function updateState(rfb, state, oldstate, msg) {
                console.log(state, msg);
                if (state == 'disconnected') {
                                    $("canvas").hide();
                                    $("table").show();
                                    $("#connectioncontrols").hide();
              }
            };

            options.onXvpInit = function() { };
            options.onPasswordRequired = function() {
                console.log("password required");
            };

            rfb = new RFB(options);
            rfb.connect(window.location.hostname, window.location.port, "", path);
        }
    }());
    </script>
</body>
</html>
